<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="css/common.css" >
    <link rel="stylesheet" href="css/login.css" >
</head>
<body>
<!-- 导航栏、左侧用户信息区域、右侧博客列表区域 -->
<!-- 导航栏 -->
<div class="nav">
    <!-- logo -->
    <img src="./img/charcoal.jpg" alt="logo">
    <!-- 标题 -->
    <span class="head">在线OJ</span>
    <!-- 空白占位符 -->
    <span class="spacer">欢迎来到在线OJ</span>
    <!-- 右侧的几个连接 -->
</div>
<!-- 登录页面的页面容器 -->
<div class="login-container">
    <div class="login-dialog">
        <h2>登 录</h2>
        <div class="row">
            <span>账号:</span>
            <input type="text" id="username" name="username" placeholder="请输入账号">
        </div>
        <div class="row">
            <span>密码:</span>
            <input type="password" id="password" name="password" placeholder="请输入密码">
        </div>
        <div class="row">
            <span>验证码:</span>
            <img src="/login/captcha" onclick="changeValidateCode(this)" id="validateCodeImage">
        </div>
        <div class="row">
            <span>请输入验证码:</span>
            <input type="text" id="verifyCode" name="picture" maxlength="6" placeholder="请输入验证码">
        </div>

        <div class="row">
            <a href="register.html">还没有账号？点击注册</a>
        </div>
        <div class="row">
            <input type="button" value="登 录" id="submit">
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

    let img = document.querySelector("#validateCodeImage");
    let username = jQuery("#userId");
    let password_d = jQuery("#password");
    let co = jQuery("#verifyCode");
    function changeValidateCode(obj){
        var timeNow = new Date().getTime();
        obj.src="/user/captcha?d="+timeNow;
    }

    /*let img = document.querySelector("#validateCodeImage");

    let username = jQuery("#userId");
    let password_d = jQuery("#password");
    let co = jQuery("#verifyCode");*/

    //提交登录请求
    $(function(){
        $("#submit").click(function (){
            let username = $("#username").val();
            let password = $("#password").val();
            let captcha = $("#verifyCode").val();

            if(username == null || username == ""){
                alert("请输入账号~");
                return false;
            }
            if(password == null || password == ""){
                alert("请输入密码~");
                return false;
            }
            //执行异步http（AJAX）请求
            $.ajax({
                url:"/login/sub",
                data:{
                    "username":username,
                    "password":password,
                    "captcha":captcha,
                },
                type:"POST",
                success:function(result){
                    if(result.code == 200 && result.data != null){
                        window.location.href = 'index.html';
                    }else{
                        alert(result.errMsg);
                        window.location.href = 'login.html';
                    }
                }
            })
        })
    })
</script>
</body>
</html>